/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-02-26 18:03:33
 * @LastEditTime: 2021-02-27 08:22:50
 * @LastEditors: Zhang Zhaoda
 */
import { FC, useState, useEffect } from "react"
import style from './css/index.module.scss'
import './css/index.module.css'
import { RouteComponentProps } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { useSelector, useDispatch } from 'react-redux'
import * as allDis from '../../store/actions/imgActions'
import { stateType } from '../../store/reducers/imgReducer'
import AllImg from './components/AllImg'
import SwiperImg from './components/SwiperImg'
import axios from 'axios'
interface Iprops extends RouteComponentProps {
  history: any
}
interface reducerName {
  imgReducer: stateType
}
let Img: FC<Iprops> = function (props) {
  const { getAllData, allImgFlag, swFlag } = useSelector((reducers: reducerName) => reducers.imgReducer)
  const dispatch = useDispatch()
  const dis = bindActionCreators(allDis, dispatch)
  let [swIndex, setSwIndex] = useState(0)
  let { SerialID,CarID,ColorID } = props.history.location.state
  useEffect(() => {
    dis.getAllData(SerialID,CarID, ColorID )
  }, [])
  let allClick = (ImageID: number, PageSize: number) => {
    dis.getAllClickData(SerialID, 1, ImageID, PageSize)
    dis.getSwData(SerialID, 1, ImageID, PageSize)
    dis.allImgFlag(true)
  }
  let getSwDataClick = (ImageID: number, PageSize: number, index: number) => {
    setSwIndex(index)
    dis.getSwData(SerialID, 1, ImageID, PageSize)
    dis.swFlag(true)
  }
  let colorClick = () => {
    props.history.push({ pathname: '/color', state: { SerialID, code: 'img', CarID, ColorID } })
  }
  let carClick = () => {
    props.history.push({ pathname: '/type', state: { SerialID, code: 'img', CarID, ColorID}})
  }
  const IN = (index: number) => {
    setSwIndex(index)
  }
  // useEffect(() => {
  //   axios.get('/api/v2-car-getImageList.html', { params: { SerialID, CarID, ColorID } }).then(res => {
  //     console.log(res.data);
      
  //     if (res.data.code === 1) {
  //       // dispatch({ type: "GETALLDATA", data: res.data.data })
  //     }
  //   })
  //   console.log(props.history.location.state);
  // }, [])
  return <div 
  className={`${style.img} animate__animated animate__backInLeft`}>
    {
      allImgFlag ? <AllImg IN={IN}></AllImg> :
        <div className={style.oneDiv}>
          <div className={style.butClassify}>
            <button onClick={colorClick}>颜色</button>|
                <button onClick={carClick}>车款</button>
          </div>
          <div className={style.main}>
            {getAllData.length !== 0 && getAllData.map((item: any, index: number) => {
              return <div key={index}>
                <div className={style.all} onClick={() => allClick(item.Id, item.Count)}>
                  <span>{item.Name}</span>
                  <span>{item.Count} {'张>'} </span>
                </div>
                {item.List.map((it: any, index: number) => {
                  return <img src={it.Url.replace("{0}", "3")} alt="" onClick={() => { getSwDataClick(item.Id, item.Count, index) }} key={index} />
                  // return <LazyLoad key={index}>
                  //               <img src={it.Url.replace("{0}", "3")} alt=""  onClick={() => { getSwDataClick(item.Id, item.Count, index) }} />
                  //       </LazyLoad>
                })}
              </div>
            })}
          </div>
        </div>
    }
    {
      swFlag ? <SwiperImg swIndex={swIndex}></SwiperImg> : ''
    }
  </div>
}
export default Img